<template>
    <div id="app" class="joindetail">
        <Header notab="join"/>
        <div class="contentWeb">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="detailCrumb">
                <el-breadcrumb-item>招聘会</el-breadcrumb-item>
                <el-breadcrumb-item>招聘会详情</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="joincontent clear">
                <div :class="{'sutatusimg': true, 'end': info.zphzt == 4, 'will': info.zphzt == 2}"></div>
                <div class="joinLeft">
                    <img :src="info.banner || zp">
                </div>
                <div class="joinRight">
                    <el-tooltip :content="info.title" placement="top">
                      <div class="titlte" style="overflow: hidden;
                        white-space: nowrap;
                        display:inline-block;
                        text-overflow: ellipsis;
                        max-width: 700px;">{{info.title}}</div>
                    </el-tooltip>
                    <div class="deac"><span>举办城市</span><span class="nr">{{info.city}}</span></div>
                    <div class="deac"><span>详细地址</span><span class="nr">{{info.address}}</span></div>
                    <div class="deac"><span>咨询电话</span><span class="nr">{{info.telno}} {{info.telno2}}</span></div>
                    <div class="deac"><span>举办时间</span><span class="nr">{{info.startTime}} - {{info.endtime}}</span>
                    </div>
<!--                    <button type="button" v-if="info.joinStatus *1  !== 1" :disable="info.joinStatus *1  !== 1 " @click="tobaoming(info.id)" :class="info.joinStatus *1  === 1  ? 'baoming': 'baoming end'">{{info.joinStatus *1  === 1 ? '报名':-->
<!--                        '已报名'}}-->
<!--                    </button>-->
<!-- <button type="button" v-if="info.joinStatus *1  !== 1" class="baoming end">已报名
                    </button>
                    <button type="button" v-else-if=" info.zphzt == 4 ||  info.zphzt == 2" class="baoming end">报名
                    </button>
                    <button type="button" v-else class="baoming" @click="tobaoming(info.id)">报名
                    </button> -->

                    <template v-if="info.zphzt != 4">
                      <button type="button" v-if="!info.joinStatus || info.joinStatus == 1" class="baoming" @click="tobaoming(info.id)">报名
                      </button>
                      <button type="button" v-else class="baoming end">已报名
                      </button>
                    </template>

                </div>

            </div>
            <div class="mokuai">
                <div class="indextitle clear">
                    <div class="leftT">
                        <div class="qanhuiqiye">招聘会简介</div>
                    </div>
                </div>
                <div class="smaru" v-html="info.content">
                </div>
                <div class="detail_con">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <div class="qynum">
                                <p>参会企业数量</p>
                                <h2>{{companyNum}}</h2>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="jobnum">
                                <!-- <p>招聘职位数量</p>
                                <h2>{{jobNum}}</h2> -->
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="jobnum">
                                <!-- <p>参会人才数量</p>
                                <h2>{{peopleNum}}</h2> -->
                              <p>招聘职位数量</p>
                              <h2>{{jobNum}}</h2>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="mokuai">
                <div class="indextitle clear">
                    <div class="leftT">
                        <div class="qanhuiqiye">热门职位</div>
                    </div>
                    <div class="rightT"><a :href="'jobList.html?id='+job_fair_id+'&name='+info.title">更多 ></a></div>
                </div>
                <el-row :gutter="30">
                    <el-col :span="12" v-for="(item, index) in jobList" :key="index">
                        <div class="grid-content bg-purple">
                            <div class="jobcon">
                                <div class="clear" @click="tojob(item.position_id)">
                                    <div class="companyName">{{item.position_name}}</div>
                                    <div class="prices">{{item.wage_range}}</div>
                                </div>

                                <div class="desc clear">
                                    <span v-if="item.address">{{item.address}}</span>
                                    <span v-if="item.experience">{{item.experience}}</span>
                                    <span v-if="item.educational">{{item.educational}}</span>
                                    <span>招{{item.zprs}}人</span>
                                </div>

                                <div class="compname" @click="tocompany(item.id)">{{item.companyName}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="mokuai">
                <div class="indextitle clear">
                    <div class="leftT">
                        <div class="qanhuiqiye">参会企业</div>
                    </div>
                    <div class="rightT"><a :href="'companylist.html?id=' + info.id">更多 ></a></div>
                </div>
                <el-row :gutter="30">
                    <el-col :span="12" v-for="(item, index) in companyList" :key="index">
                        <div class="grid-content bg-purple" @click="tocompany(item.enterpriseUid)">
                            <div class="company">
                                <div class="companyLogo"><img :src="item.logo" alt=""></div>
                                <div class="companyContent">
                                    <div class="companyName">{{item.name}}</div>
                                    <div class="companyTip">
                                        <span style="padding-right: 14px;">{{item.industry}}</span>
                                        <span>|</span>
                                        <span style="padding:0 14px">{{item.enterpriseNature}}</span>
                                        <span>|</span>
                                        <span style="padding-left: 14px">{{item.companySize}}</span>
                                    </div>
                                    <div class="solid"></div>
                                    <div class="companyDetail">
                                        <span class="detail_item1">招聘职位</span>
                                        <span class="detail_item2" style="color: #20a2b2;padding-right: 73px">{{item.recruitPositionNum}}</span>
                                        <span class="detail_item1 on">招聘人数</span>
                                        <span class="detail_item2" style="color: #f23f00;">{{item.zprs}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import mt from '../../assets/img/mt.png'
import {
  DetailJobFairId,
  GetQueryString,
  JobFairEnterprisesByPage,
  PositionByPageInfo,
  personalJoinJopFair,
  JobFairQuantity,
  getJFHotPosition, getJFAllEnterprise
} from '../../assets/js/domains'
import zp from '../../assets/img/zp.png'
import moment from 'moment'

export default {
  name: 'JobDetail',
  components: {
    Header,
    Footer
  },
  directives: {},
  data: function () {
    return {
      zp: zp,
      mt: mt,
      companyList: [],
      companyNum: 0,
      jobList: [],
      jobNum: 0,
      peopleNum: 0,
      job_fair_id: 0,
      info: {},
      // joinStatus: 0,
      search: {
        pageNum: 1,
        pageSize: 10,
        jf_id: ''
      }

    }
  },
  created: function () {
    document.title = '找工作'
    this.job_fair_id = GetQueryString('id')
    this.joinStatus = GetQueryString('joinStatus')
    this.JobFairQuantity()
    this.getJFHotPosition()
    this.getJFAllEnterprise()
  },
  computed: {},
  mounted: function () {
    this.getDetailJobFairId()
    // this.getJobFairEnterprisesByPage()
    // this.getPositionByPageInfo()
  },
  methods: {
    getPositionByPageInfo: function () {
      const _this = this
      PositionByPageInfo({ pageNum: 1, pageSize: 20 }).then(function (res) {
        if (res.code === 200) {
          // _this.jobList = res.data.content
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    getJFHotPosition: function () {
      const _this = this
      getJFHotPosition({ pageNum: 1, pageSize: 20, jf_id: this.job_fair_id, position_name: '' }).then(function (res) {
        if (res.code == 200) {
          _this.jobList = res.data.content
        }
      })
    },
    getJobFairEnterprisesByPage: function () {
      const _this = this
      const md_userInfo = JSON.parse(localStorage.getItem('md_userInfo'))
      JobFairEnterprisesByPage({
        enterprise_uid: md_userInfo.enterpriseUid,
        pageNum: 1,
        pageSize: 20
      }).then(function (res) {
        if (res.code === 200) {
          // _this.companyList = res.data.content;
        }
      })
    },
    JobFairQuantity: function () {
      const _this = this
      JobFairQuantity({
        job_fair_id: this.job_fair_id
      }).then(function (res) {
        if (res.code == 200) {
          _this.companyNum = res.data.enterprise_num
          _this.jobNum = res.data.position_num
          _this.peopleNum = res.data.personal_num
        }
      })
    },
    getJFAllEnterprise: function () {
      const _this = this
      _this.search.jf_id = _this.job_fair_id
      getJFAllEnterprise(_this.search).then(function (res) {
        if (res.code === 200) {
          _this.companyList = res.data.content
        }
      })
    },
    getDetailJobFairId: function () {
      const _this = this
      if (localStorage.getItem('shenfen') == 1) {
        this.userUid = localStorage.getItem('md_enterpriseUid')
      } else {
        this.userUid = localStorage.getItem('md_user_uid')
      }
      DetailJobFairId({ job_fair_id: this.job_fair_id, userUid: this.userUid }).then(function (res) {
        if (res.code === 200) {
          _this.info = res.data
          if (_this.joinStatus != undefined && _this.joinStatus) {
            _this.info.joinStatus = _this.joinStatus
          }
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    tobaoming: function (id) {
      // window.location.href = 'joinAdd.html?id=' + id
      const _this = this
      const shenfen = localStorage.getItem('shenfen')
      if (shenfen * 1 === 1) {
        if (this.curUserInfo.approval != 2) {
          this.$message.error('企业还未通过审核，不能报名招聘会')
          return
        }
        if(this.info.zphJzrq && new Date(this.info.zphJzrq) < new Date()){
          this.$message.error('招聘会报名已截止，不能报名招聘会')
          return
        }
        window.location.href = 'joinAdd.html?id=' + id
        return
      } 
      if (!this.curUserInfo.userUid) {
        this.$message.warning('请先登录！')
        return
      }
      if (!this.curUserInfo.approval || this.curUserInfo.approval != 2) {
        this.$message.warning('用户还未通过审核， 不能报名')
        return
      }
      if (this.curUserInfo.jlzt != 1) {
        this.$message.warning('简历异常，请完善简历')
        return
      }
      personalJoinJopFair({ jobFairId: id, userUid: this.curUserInfo.userUid, joinStatus: 2 }).then(function (res) {
        if (res.code === 200) {
          _this.$alert('报名成功', '提示', {
            callback () {
              window.location.href = 'joinDetail.html?id=' + id + '&joinStatus=2'
            }
          })
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
      
    },
    tojob: function (id) {
      window.location.href = 'jobDetail.html?id=' + id
    },
    tocompany: function (id) {
      window.location.href = '/companyDetail.html?enterpriseUid=' + id
    }
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/joinDetail";
</style>
